<template>
  <el-dialog title="选择商品" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" append-to-body>
    <template>
      <div>
        <div class="left" @click="prev">
          <el-button type="text" :disabled="pageIndex === 1"> <i class="el-icon-arrow-left" />
          </el-button>
        </div>
        <div class="right" @click="next">
          <el-button type="text" :disabled="pageIndex === +totalPage">
            <i class="el-icon-arrow-right" />
          </el-button>
        </div>
        <div class="input">
          <span>商品名称</span>
          <el-input v-model="input" placeholder="请输入内容" style="width:250px" />
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </div>
        <div class="main">
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in currentPageRecords"
              :key="item.skuId"
              :xs="12"
              :sm="12"
              :lg="{ span: '4-8' }"
            >
              <el-card>
                <img :src="item.skuImage" alt="" style="width:40px;height:40px" @click="change(index)">
                <div>{{ item.skuName }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <el-button type="warning" @click="btn">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { skuSearchAPI } from '@/api/vmIndex'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 1,
      currentPageRecords: [],
      input: ''
    }
  },
  created() {
    this.getLIst()
  },
  methods: {
    handleClose() {
      this.$emit('update:dialogVisible', false)
    },
    btn() {
      this.handleClose()
    },
    change(index) {
      this.isShow[index] = true
    },
    search() {
      this.getLIst(this.input)
    },
    async getLIst(data) {
      const res = await skuSearchAPI(this.pageIndex, this.pageSize, data)
      this.currentPageRecords = res.data.currentPageRecords
      this.totalPage = res.data?.totalPage
      console.log(this.data.totalPage)
    },
    prev() {
      this.pageIndex = this.pageIndex - 1
      this.getLIst()
    },
    async next() {
      this.pageIndex = this.pageIndex + 1
      this.getLIst()
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input {
    width: 100%;
    height: 60px;
    background-color: #fff;
    margin-left: 20px;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #606266;

    span {
        margin-right: 20px;
    }

    .el-button {
        margin-left: 20px;
    }
}

.el-col-lg-4-8 {
    width: 20%;
}

.main {
    padding: 0 50px;

    .el-card {
        height: 100px;
        margin-top: 20px;
    }
}

.left {
    position: fixed;
    top: 350px;
    z-index: 10;

    .el-button {
        font-size: 40px;
    }
}

.right {
    position: fixed;
    top: 350px;
    right: 400px;
    z-index: 10;

    .el-button {
        font-size: 40px;
    }
}

.color {
    color: red;
}
</style>
